@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

/* body标签 */
body {
    /* 设置body高度为100%窗口高度 100vh==100% */
    /* vh跟100%的区别 ：
       1.当元素没有内容的时候，设置100% 元素不会被撑开，此时高度就是0
       2.当设置vh的时候，元素就会被撑开，与屏幕一致
       3.100%是相对于包含它的最近的父元素的高度和宽度。
        vw (viewport width) vh (viewport height) 是相对于视口的宽度和高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系，可以用来开发自适应多种屏幕设备。
    */
    height: 100vh;

    /* 盒子模型 */
    display: flex;
    /* 把所有写在body标签里面的代码居中显示 */
    /* 上面定义了flex盒子，这里就直接用盒子模型定位 */

    /* 剧中排列 */
    /* 横向居中 */
    justify-content: center; 

    /* 使元素位于容器的中心，会将body里面的元素，居中显示 */
    align-items: center;

    background-color: rgb(253, 253, 253);
}

.container {
    display: flex;
    justify-content: center; 
    align-items: center;

    /* 使垂直显示 ，正如一个列一样  会将两个盒子垂直显示*/
    flex-direction: column;

    width: 400px;
    height: 500px;

    /* 圆角边框 */
    border-radius: 20px;
    background-color: #4471a3;

    /* 盒子阴影  x 偏移量 | y 偏移量 | 阴影模糊半径| 阴影颜色 */
    box-shadow: 15px 15px 10px rgba(33,45,58,.3);

    /* 溢出隐藏 超过给定的宽度和高度，超出的部分就会隐藏 */
    overflow: hidden;

    /* 生成相对定位的元素，相对于其正常位置进行定位，如left20 会在left添加20像素 */
    position: relative;
}


.container form {
    width: 400px;
    height: 250px;

    display: flex;

    /* 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 */
    /* 均匀排列每个元素，每个元素周围分配相同的空间 */
    justify-content: space-around;

    /* 变成一列 */
    flex-direction: column;

    /* 居中显示 */
    align-items: center;

    /* 层叠效果：就是在平面的上面一层 */
    z-index: 1;
}

.container form .tbx {
    width: 250px;
    height: 40px;

    /* 去掉元素周围的一条黑线 */
    outline: none;

    /* 边框不渲染 */
    border: none;

    color: rgb(113, 113, 113);
    font-size: 15px;
}


.container form .tbx::placeholder {
    color: rgb(193, 190, 190);
    font-size: 16px;
}

.container form .sub {
    width: 250px;
    height: 40px;
    outline: none;
    border: 1px solid #fff;
    border-radius: 20px;  
    /* 字间距 */
    letter-spacing: 5px;
    color: #fff;
    background: none;
    /* 鼠标放上去有光标 */
    cursor: pointer;
    margin-top: 20px;
}

.container h1 {
    color: #fff;
    font-size: 45px;
    letter-spacing: 5px;
    font-weight: normal;
    text-shadow: 5px 5px 5px rgba(33,45,58,.4);
    z-index: 1;
}

/* 设置鼠标进入的样式 */
.container .in {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgb(242, 73, 73);
    /*  translate平移，x轴和y轴往负轴方向平移50%  50%指自身的高度和宽度的50% */
    transform: translate(-50%,-50%);

    /* 使用out动画  持续0.5s  缓出的时间函数  停留在最后一帧 */
    animation: in 0.5s ease-out forwards;
}


/* 设置鼠标离开的样式 */
.container .out {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: rgb(242, 73, 73);
    transform: translate(-50%,-50%);
    /* 使用out动画  持续0.5s  缓出的时间函数  停留在最后一帧 */
    animation: out 0.5s ease-out forwards;
}


/* 设置鼠标进入时，元素的动画 */
@keyframes in {
    /* 初始关键帧 */
    0% {
        width: 0;
        height: 0;
    }

    /* 结束关键帧 */
    100% {
        width: 1200px;
        height: 1200px;
    }
}

/* 设置鼠标离开时，元素的动画 */
@keyframes out {
    /* 初始关键帧 */
    0% {
        width: 1200px;
        height: 1200px;
    }

    /* 结束关键帧 */
    100% {
        width: 0;
        height: 0;
    }
}











